<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-25 21:18:06
 * @LastEditTime: 2023-05-17 22:01:53
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\Resource\index.vue
 * Copyright 版权声明
-->
<template>
  <standard-page
    ref="crudPage"
    v-model:page="page"
    v-model:listData="listData"
    v-model:btnLoading="btnLoading"
    v-model:listLoading="listLoading"
    :options="options"
    @on-load-data="onLoadData"
    @search-change="searchChange"
    @search-reset="resetChange"
    @refresh-change="refreshChange"
    @row-save="rowSave"
    @row-update="rowUpdate"
    @row-del="rowDel"
    @selection-change="selectionChange"
  >
    <!-- 自定义操作按钮 -->
    <template #handleBtns>
    </template>
    <!-- 资源类型 列卡槽 -->
    <template #column_category="scope">
      <template v-for="(item, index) in CATEGORY_ENUM" :key="index">
        <template v-if="scope.row.category === item.value">
            <template v-if="scope.row.category === 1">
              <span style="color: #67c23a;">
                <el-icon style="vertical-align: middle;"><Menu /></el-icon>
                {{item.label}}
              </span>
            </template>
            <template v-else>
              <span style="color: #f56c6c;">
                <el-icon style="vertical-align: middle;"><SwitchButton /></el-icon>
                {{item.label}}
              </span>
            </template>
        </template>
      </template>
    </template>
    <!-- 状态 列卡槽 -->
    <template #column_status="scope">
      <template v-for="(item, index) in ENABLED_STATE_ENUM" :key="index">
        <template v-if="scope.row.status === item.value">
          <el-tag :type="item.type">{{item.label}}</el-tag>
        </template>
      </template>
    </template>
    <!-- 是否新页面打开 列卡槽 -->
    <template #column_isOpen="scope">
      <template v-for="(item, index) in IS_OPEN_ENUM" :key="index">
        <template v-if="scope.row.isOpen === item.value">
          {{item.label}}
        </template>
      </template>
    </template>
    <!-- 是否快捷菜单 列卡槽 -->
    <template #column_isQuick="scope">
      <template v-for="(item, index) in IS_QUICK_ENUM" :key="index">
        <template v-if="scope.row.isQuick === item.value">
          {{item.label}}
        </template>
      </template>
    </template>
    <!-- 表格操作列 - 自定义操作按钮 -->
    <template #handleColumnBtns="scope">
      <el-link
        type="primary"
        title="新建子资源"
        @click="handleCreate(scope.row)"
        v-handle-auth:CREATE_SON_RESOURCE="{'meta': this.$route.meta}"
      >
        新建子资源
      </el-link>
      <el-link
        type="warning"
        title="移动"
        @click="handleMove(scope.row)"
        v-handle-auth:MOVE_RESOURCE="{'meta': this.$route.meta}"
      >
      移动
      </el-link>
      <el-link
        type="success"
        title="数据权限配置"
        @click="handleDataAuth(scope.row)"
      >
      数据权限配置
      </el-link>
    </template>
  </standard-page>
</template>

<script>
import { getTree as getList, deleteSave } from '@/api/SysManage/resource'
import { mapGetters } from 'vuex'
// 标准增删改查页面 - 组件
import StandardPage from '@/components/StandardPage/index.vue'
import { ENABLED_STATE_ENUM } from '@/config'
import { CATEGORY_ENUM, IS_OPEN_ENUM, IS_QUICK_ENUM } from '@/config/views/SysManage/Resource'
// 图标组件
import { SwitchButton, Menu } from '@element-plus/icons-vue'

// 当前模块名称
const MODULE_VALUE = 'SYS_RESOURCE_MANAGE'

export default {
  name: 'SysMenu',
  computed: {
    ...mapGetters([
      'drawerVisible'
    ])
  },
  components: {
    StandardPage,
    SwitchButton,
    Menu
  },
  data() {
    return {
      // 按钮 loading 状态
      btnLoading: false,
      // 列表 loading 状态
      listLoading: false,
      // 分页信息
      page: {
        pageNum: 1,
        total: 110,
        pageSize: 9999
      },
      // 查询条件
      listQuery: {},
      // 数据
      listData: [],
      options: {
        MODULE_VALUE,
        createDrawerWidth: '40%', // 新建 抽屉弹窗宽度
        updateDrawerWidth: '40%', // 编辑 抽屉弹窗宽度
        detailDrawerWidth: '40%', // 详情 抽屉弹窗宽度
        // 页面title, showHeader 为 true 时生效， 默认值： 页面标题
        title: '资源管理',
        // 结果展示区标题
        // resultTitle: '列表',
        // 是否展示 header， 默认值： true
        showHeader: true,
        // 是否展示 查询条件区域, 默认值 ： true
        showSearch: true,
        // 搜索条件标题的宽度, 默认值： 110px
        searchLabelWidth: '110px',
        // 搜索的文字， 默认值： 查询
        searchBtnText: '查询',
        // 清空的文字， 默认值： 重置
        emptyBtnText: '重置',
        // 是否展示 查询条件区域 - 【展开/折叠】 按钮， 默认值： true
        searchShowMoreBtn: false,
        // 是否展示 分页， 默认值： true
        showPage: false,
        // 是否显示表格 行多选， 默认值： false
        selection: false,
        // 是否显示表格 索引/序号 列， 默认值： false
        index: false,
        // 设置表格的序号的标题,默认为： 序号
        indexLabel: '序号',
        // 表格操作列 - 宽度
        handleColumnWidth: '240',
        // 隐藏查看按钮
        showDetailBtn: false,
        // table 属性
        tableAttr: {
          rowKey: 'id', // 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
          // lazy: true, // 是否懒加载子节点数据
          // // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
          // load(tree, treeNode, resolve) {
          //   // console.log(tree, treeNode, resolve)
          //   getList({
          //     current: 1,
          //     size: 9999,
          //     parentId: tree.id
          //   }).then(response => {
          //     const listData = response.data.records || []
          //     resolve(listData)
          //   }).catch(err => {
          //     err
          //   })
          // },
          // 渲染嵌套数据的配置选项
          treeProps: {
            children: 'children',
            hasChildren: 'hasChildren'
          }
        },
        // 字段配置
        column: [
          // {
          //   label: '',
          //   prop: 'expendTree',
          //   width: 70, // 对应列的宽度
          //   align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          // },
          {
            label: '资源名称',
            prop: 'name',
            minWidth: 200
          },
          {
            label: '资源类型',
            prop: 'category',
            width: 90, // 对应列的宽度
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          },
          {
            label: '资源编号',
            prop: 'code',
            minWidth: 100
          },
          {
            label: '资源别名',
            prop: 'alias',
            minWidth: 100
          },
          {
            label: '菜单地址',
            prop: 'path'
          },
          {
            label: '图标',
            prop: 'source',
            width: 90, // 对应列的宽度
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          },
          {
            label: '是否打开新窗口',
            prop: 'isOpen',
            width: 140, // 对应列的宽度
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          },
          {
            label: '是否快捷菜单',
            prop: 'isQuick',
            width: 110, // 对应列的宽度
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          },
          {
            label: '备注',
            prop: 'remark',
            width: 90 // 对应列的宽度
          },
          {
            label: '排序',
            prop: 'sort',
            width: 70, // 对应列的宽度
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          },
          {
            label: '创建时间',
            prop: 'createTime',
            width: 160, // 对应列的宽度
            align: 'center' // 水平对称方式， 默认： left ， 枚举：left、center、right
          },
          {
            show: false, // 在列表中不展示此列， 一般用于在列表不展示，在查询条件中展示
            label: '关键字', //
            prop: 'key',
            search: true, // 是否在搜索区作为查询条件展示， 默认值： false
            searchType: 'text', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            searchPlaceholder: '请输入关键字', // 输入框占位文本
            searchTip: '请输入关键字', // 辅助提示语
            searchTipPlacement: 'left' // 提示语的方向
          },
          {
            label: '状态',
            prop: 'status',
            width: 100, // 对应列的宽度
            align: 'center', // 水平对称方式， 默认： left ， 枚举：left、center、right,
            search: true, // 是否在搜索区作为查询条件展示
            searchType: 'select', // 定义搜索框的类型， 默认值： text ， 枚举： text 、 select 、 selectMultiple 、 checkbox 、 radio 、 daterange 、 datetime
            dictData: ENABLED_STATE_ENUM // searchType / formType 如果为 checked 、 radio 、 select 等需要枚举的配置此值
          }
        ]
      },
      // 状态 枚举
      ENABLED_STATE_ENUM,
      // 资源类型 枚举
      CATEGORY_ENUM,
      // 是否打开新窗口 枚举
      IS_OPEN_ENUM,
      // 是否快捷菜单 枚举
      IS_QUICK_ENUM
    }
  },
  watch: {
  },
  created() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 数据权限
    handleDataAuth(row) {
      this.$store.dispatch('ShowDrawer', {
        module: MODULE_VALUE,
        type: 'DATA_AUTH',
        size: '50%',
        params: {
          pageParams: row
        }
      }).then(res => {

      })
    },
    // 移动资源
    handleMove(row) {
      this.$store.dispatch('ShowDrawer', {
        module: MODULE_VALUE,
        type: 'MOVE',
        size: '30%',
        params: {
          pageParams: row
        }
      }).then(res => {

      })
    },
    // 新建子资源
    handleCreate(row) {
      this.$store.dispatch('ShowDrawer', {
        module: MODULE_VALUE,
        type: 'CREATE',
        size: '40%',
        params: {
          pageParams: {
            parentId: row.id,
            parentName: row.name
          }
        }
      }).then(res => {

      })
    },
    // 加载数据
    onLoadData(params) {
      if (typeof params !== 'undefined') {
        this.listQuery = Object.assign({}, this.listQuery, params.query)
      }

      // 查询条件处理
      const queryParams = JSON.parse(JSON.stringify(this.listQuery))

      queryParams.parentId = 0

      this.btnLoading = true
      this.listLoading = true
      return getList({
        current: this.page.pageNum,
        size: this.page.pageSize,
        ...queryParams
      }).then(response => {
        this.listData = response.data || []

        this.btnLoading = false
        this.listLoading = false
      }).catch(err => {
        err
        this.btnLoading = false
        this.listLoading = false
      })
    },
    // 点击搜索后执行方法
    searchChange(params) {
      console.log('点击搜索按钮回调', params)
    },
    // 点击清空的执行方法
    resetChange(params) {
      console.log('清空回调', params)
    },
    // 刷新数据
    refreshChange(params) {
      console.log('刷新数据', params)
    },
    // 新增数据
    rowSave(params) {
      console.log('新增数据', params)
    },
    // 修改数据
    rowUpdate(params) {
      console.log('修改数据', params)
    },
    // 删除数据
    rowDel(params) {
      // console.log('删除数据', params)
      deleteSave({
        ids: params.data.id
      }).then(response => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.onLoadData()
      }).catch(err => {
        err
      })
    },
    // selectionChange
    selectionChange(data) {
      console.log('selectionChange:', data)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
